﻿@{
    if (ViewBag.order_status == 4)
    {
        ViewBag.Title = "待发货订单";
    }
    else
    {
        ViewBag.Title = "订单查询";
    }

}
@section CSS{

}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            @ViewBag.Title
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">销售管理</a></li>
            <li class="active">@ViewBag.Title</li>
        </ol>
    </section>
    <section>
        <div class="col-xs-12">
            <div class="box box-primary ">
                <!-- form start -->
                <form class="form-horizontal">
                    <div class="box-body" style="display:none;">
                        <div class="form-group" style="display:none">
                            <label class="col-sm-2 control-label">订单状态</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="order_status">
                                    <option value="0">-请选择状态-</option>
                                    <option value="1">待付款</option>
                                    <option value="4">待发货</option>
                                    <option value="5">待收货</option>
                                    <option value="6">待评论</option>
                                    <option value="10">完成</option>
                                    <option value="20">取消</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label">支付状态</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="pay_status">
                                    <option value="0">-请选择状态-</option>
                                    <option value="1">待处理</option>
                                    <option value="2">已付款</option>
                                    <option value="4">退款</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" style="display:none">
                            <label class="col-sm-2 control-label">发货状态</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="shipment_status">
                                    <option value="0">-请选择状态-</option>
                                    <option value="1">未发货</option>
                                    <option value="2">部分配送</option>
                                    <option value="3">已发货</option>
                                    <option value="3">已交货</option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label">支付类型</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="pay_type">
                                    <option value="0">-请选择状态-</option>
                                    <option value="1">余额支付</option>
                                    <option value="3">支付宝支付</option>
                                    <option value="2">微信APP支付</option>
                                    <option value="4">微信公众号支付</option>
                                    <option value="5">微信H5支付</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" style="display:none;">
                            <label class="col-sm-2 control-label">收货人</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="receiver_name" placeholder="收货人">
                            </div>
                            <label class="col-sm-2 control-label">收货人手机</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="receiver_mobile" placeholder="收货人手机">
                            </div>
                        </div>
                        <div class="form-group" style="display:none;">
                            <label class="col-sm-2 control-label">下单时间</label>
                            <div class="col-sm-2">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right" id="start_date">
                                </div>
                            </div>
                            <label style="float:left;"> - </label>
                            <div class="col-sm-2">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" class="form-control pull-right" id="end_date">
                                </div>
                            </div>
                        </div>
                        <div class="form-group" style="display:none">
                            <label class="col-sm-2 control-label">店铺</label>
                            <div class="col-sm-2">
                                <input type="text" class="form-control" id="shop_name" placeholder="店铺">
                            </div>
                        </div>
                    </div>
                    @if (ViewBag.order_status == 0)
                    {
                        <div class="box-footer ">
                            @*<button type="button" style="display:none;" class="btn btn-primary btn-search center-block" id="btnSearch"><i class="fa fa-search"></i> 查询</button>*@
                            <a class="btn btn-app" onclick="GetOrdersByStatus(0)">
                                <span class="badge bg-yellow"></span>
                                <i class="fa fa-cubes"></i> 全部
                            </a>
                            <a class="btn btn-app" onclick="GetOrdersByStatus(1)">
                                <span class="badge bg-yellow" id="pay_count">0</span>
                                <i class="fa fa-credit-card"></i> 待支付
                            </a>
                            <a class="btn btn-app" onclick="GetOrdersByStatus(4)">
                                <span class="badge bg-green" id="shipment_count">0</span>
                                <i class="fa fa-archive"></i> 待发货
                            </a>
                            <a class="btn btn-app" onclick="GetOrdersByStatus(5)">
                                <span class="badge bg-purple" id="receive_count">0</span>
                                <i class="fa fa-truck"></i> 待收货
                            </a>
                            <a class="btn btn-app" onclick="GetOrdersByStatus(6)">
                                <span class="badge bg-red-active" id="comment_count">0</span>
                                <i class="fa fa-comment"></i> 待评论（已收货）
                            </a>
                            <a class="btn btn-app" onclick="GetOrdersByStatus(10)">
                                <span class="badge bg-teal" id="complete_count">0</span>
                                <i class="fa fa-check-circle"></i> 完成
                            </a>
                            <a class="btn btn-app" onclick="GetOrdersByStatus(20)">
                                <span class="badge bg-light-blue" id="cancel_count">0</span>
                                <i class="fa fa-trash"></i> 取消
                            </a>
                        </div>
                    }
                    <!-- /.box-footer -->
                </form>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header my_search">
                        <input type="text" style="width:360px;" class="form-control" id="order_no" placeholder="订单编号">
                        <button type="button" class="btn btn-default " id="btnSearch"><i class="fa fa-search"></i> 搜索</button>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="DataList" class="table table-bordered table-striped table-hover ">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>图片</th>
                                    <th>商品名</th>
                                    <th>单价/数量</th>
                                    <th>运费</th>
                                    <th>商品总额</th>
                                    <th>配送区域</th>
                                    <th>交易状态</th>
                                    <th>下单时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody> </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    @Html.Action("GetLogistics", "Order")
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@section JS{
    <script>
        $(function () {
            $("#order_status").val(@ViewBag.order_status);

            //初始化表格
            GenerateTable();
            GetOrderInfo();
            //鼠标移动到该行变色
            $('.table-hover tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    u_table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
            //搜索事件
            $("#btnSearch").on("click", function () {
                var start_date = $('#start_date').val();
                var end_date = $("#end_date").val();
                $("#order_status").val(0);
                if ((start_date == null && end_date != null) || (start_date != null && end_date == null)) {
                    layer.msg('请把时间填充完整!', { icon: 1, time: 1000 });
                }
                else {
                    u_table.fnDestroy();
                    GenerateTable();
                }
            });

            $('#start_date').datepicker({
                autoclose: true
            });

            $('#end_date').datepicker({
                autoclose: true
            });
        });

        //生成表格
        function GenerateTable() {
            u_table = $('#DataList').dataTable({
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "iDisplayLength": 10,
                "bProcessing": true,
                "bServerSide": true,
                "sScrollX": true,
                "bAutoWidth":false,
                "fnServerParams": function (aoData) {
                    var start_date = $('#start_date').val();
                    var end_date = $("#end_date").val();
                    var order_status = $("#order_status").val();
                    var pay_status = $("#pay_status").val();
                    var shipment_status = $("#shipment_status").val();
                    var pay_type = $("#pay_type").val();
                    var receiver_name = $("#receiver_name").val();
                    var receiver_mobile = $("#receiver_mobile").val();
                    var shop_name = $("#shop_name").val();
                    var order_no = $("#order_no").val();
                    aoData.push(
                        { "name": "start_date", "value": start_date },
                        { "name": "end_date", "value": end_date },
                        { "name": "order_status", "value": order_status },
                        { "name": "pay_status", "value": pay_status },
                        { "name": "shipment_status", "value": shipment_status },
                        { "name": "pay_type", "value": pay_type },
                        { "name": "receiver_name", "value": receiver_name },
                        { "name": "receiver_mobile", "value": receiver_mobile },
                        { "name": "shop_name", "value": shop_name },
                        { "name": "order_no", "value": order_no }
                    );
                },
                "sAjaxSource": "/order/GetOrders",
                "aoColumns": [
                    { "mDataProp": 'order_no' },
                    {
                        "sWidth":"10%",
                        "mDataProp": 'goods', "mRender": function (data, type, full) {
                            return '<img style="width:80px;height:80px;margin: auto;" src="' + domain + data.picture_url + '" />';
                        }
                    },
                    {
                        "sWidth":"15%",
                        "mDataProp": 'goods', "mRender": function (data, type, full) {
                            return '<div><p>'+data.goods_name+'</p> <p>'+data.json_specs+'</p></div>';
                        }
                    },
                    {
                        "mDataProp": 'goods', "mRender": function (data, type, full) {
                            return '<div style="text-align:center"><p>' + data.goods_price + '</p><p>X' + data.goods_quantity+'</p><div>';
                        }
                    },
                    { "mDataProp": 'shipping_fee' },
                    { "mDataProp": 'goods_total' },
                    {
                        "mDataProp": 'area', "mRender": function (data, type, full) {
                            return data.replace(/,/g,'</br>');
                        }
                    },
                    { "mDataProp": 'order_status' },
                    {
                        "mDataProp": 'add_time', "mRender": function (data, type, full) {
                            return moment(data).format("YYYY-MM-DD HH:mm:ss");
                        }
                    },
                    {
                        "mDataProp": 'order_id', "mRender": function (data, type, full) {
                            return (full.order_status == '待发货' ? '<button type="button" onclick="SendShip(' + data + ')" class="btn btn-default" data-toggle="modal" data-target="#modal-default">发货</button> ' : '')
                                + '<a class="btn btn-default " href = "/Order/GoodsOrder/' + data + '"  title="详情">详情</a>'
                                + (full.order_status == '待发货' ?'<br /> <a style="margin-top: 10px;" href="/Order/PrintExpress/' + data +'" target="_blank" id="btPrint" class="btn btn-default"><i class="fa fa-print"></i> 打印发货单</a>':'')
                         }
                    },
                ]
            });
        }

        //发货
        function SendShip(order_id) {
            $("#order_id").val(order_id);
        }

        //发货
        function UpdateLogistics() {
            var order_id = $('#order_id').val();
            var logistics = $("#logistics").val();
            var waybill_no = $("#waybill_no").val();
            if (logistics == 0) { alert("请选择物流公司"); return; }
            if (waybill_no.length == 0) { alert("运单号不能为空"); return; }
            $('#UpdateLogistics').submit();
        }

        /*拼单*/
        function GetOrderInfo() {
            $.ajax({
                type: "get",
                url: "/Order/GetOrderInfo",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        $('#pay_count').html(res.data.pay_count);
                        $('#shipment_count').html(res.data.shipment_count);
                        $('#receive_count').html(res.data.receive_count);
                        $('#comment_count').html(res.data.comment_count);
                        $('#complete_count').html(res.data.complete_count);
                        $('#cancel_count').html(res.data.cancel_count);
                    }
                    else {
                        layer.msg(res.msg, { icon: 5, time: 1200 });
                    }
                }
            });
        }

        function GetOrdersByStatus(type) {
            $("#order_no").val("");
            $("#order_status").val(type);
            u_table.fnDestroy();
            GenerateTable();
        }
    </script>


}